<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  // 导入类型声明文件
  import type { GuessItem } from '@/types/home'
  import type { PagePargram } from '@/types/global'

  // 分页参数
  const PagePargram : Required<PagePargram> = {
    page: 1,
    pageSize: 10
  }


  // 导入获取猜你喜欢数据API
  import { getXtxGuessAPI } from '@/services/home'

  // 请求节流防抖
  const isLoding = ref(true)
  // 猜你喜欢数据
  const xtxGuessData = ref<GuessItem[]>([])
  // 判断页面是否加载完毕
  const Loadingfinish = ref(false)
  // 获取猜你喜欢数据函数
  const getXtxGuess = async () => {
    if (!isLoding.value) {
      return
    }
    // 如果加载完毕则退出
    if (Loadingfinish.value) {
      return uni.showToast({
        title: '没有更多数据~',
        icon: 'none'
      })
    }
    // 响应前节流紧张再次相应
    isLoding.value = false
    const res = await getXtxGuessAPI(PagePargram)
    xtxGuessData.value = [...xtxGuessData.value, ...res.result.items]
    // 响应后允许再次相应
    isLoding.value = true
    // 判断页码是否加载完毕，否则累加
    if (PagePargram.page < res.result.pages) {
      PagePargram.page++
    }
    else {
      Loadingfinish.value = true
    }
  }

  // 挂载加载组件后加载猜你喜欢数据
  onMounted(() => {
    getXtxGuess()
  })

  // 重置数据
  const xtxGuessDataReset = () => {
    PagePargram.page = 1
    xtxGuessData.value = []
    Loadingfinish.value = false
  }

  // 暴露组件实例
  defineExpose({
    xtxGuessDataReset,
    getXtxGuessMore: getXtxGuess
  })
</script>

<template>
  <!-- 猜你喜欢 -->
  <view class="caption">
    <text class="text">猜你喜欢</text>
  </view>
  <view class="guess">
    <navigator class="guess-item" v-for="item in xtxGuessData" :key="item.id" :url="`/pages/goods/goods?id=${item.id}`">
      <image class="image" mode="aspectFill" :src="item.picture"></image>
      <view class="name">{{item.name}}</view>
      <view class="price">
        <text class="small">¥</text>
        <text>{{item.price}}</text>
      </view>
    </navigator>
  </view>
  <view class="loading-text"> {{Loadingfinish?'没有更多数据~':'正在加载...'}}</view>
</template>

<style lang="scss">
  :host {
    display: block;
  }

  /* 分类标题 */
  .caption {
    display: flex;
    justify-content: center;
    line-height: 1;
    padding: 36rpx 0 40rpx;
    font-size: 32rpx;
    color: #262626;

    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 28rpx 0 30rpx;

      &::before,
      &::after {
        content: '';
        width: 20rpx;
        height: 20rpx;
        background-image: url(@/static/images/bubble.png);
        background-size: contain;
        margin: 0 10rpx;
      }
    }
  }

  /* 猜你喜欢 */
  .guess {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;

    .guess-item {
      width: 345rpx;
      padding: 24rpx 20rpx 20rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      background-color: #fff;
    }

    .image {
      width: 304rpx;
      height: 304rpx;
    }

    .name {
      height: 75rpx;
      margin: 10rpx 0;
      font-size: 26rpx;
      color: #262626;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      line-height: 1;
      padding-top: 4rpx;
      color: #cf4444;
      font-size: 26rpx;
    }

    .small {
      font-size: 80%;
    }
  }

  // 加载提示文字
  .loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
  }
</style>
